<template>
	<view>
		<navbar></navbar>
		<view class="container">
			<view class="Top_tilte">
				修改地址
			</view>
			<view class="List_entrance">
				<view class="List_item" v-for="(item,index) in InputList" :key='index'
					:class=" index != 3 ? 'Bottom_boder' : ''">
					<view style="width: 200rpx;">
						{{item.title}}
					</view>
					<view class="input" v-if="index != 1 && index != 2 && index != 3">
						<input type="text" maxlength="20" v-model="item.value" :placeholder="item.placeholder" />
					</view>
					<view class="input" v-if="index == 1">
						<input type="number" maxlength="11" v-model="item.value" :placeholder="item.placeholder" />
					</view>
					<view class="input" v-if='index == 3'>
						<input v-model="item.value" :placeholder="item.placeholder" />
					</view>
					<view class="c-password-input-box" v-if="index == 2">
						<text class="title" @click="selectAddress">{{address || '请选择你的地址'}}</text>
					</view>
				</view>
			</view>
			<view class="Top_tilte" style="display: flex;justify-items: center;justify-content: space-between;">
				<view style="margin-left: 30rpx;">
					设为默认地址
				</view>
				<switch color="#FFCC33" :checked="is_default == 1 ? true:false" style="transform:scale(0.7)" @change="isSwitch"/>
			</view>
			<view class="Submit" @tap.stop.prevent='Submit'>
				修改
			</view>
		</view>
		<itmister-address-picker ref="addressEl" @confirmChange="confirmChange"></itmister-address-picker>
	</view>
</template>

<script>
	const app = getApp();

	import verify from '../../../utils/verify';
	import itmisterAddressPicker from '@/components/itmister-address-picker/itmister-address-picker.nvue'

	export default {
		components: {
			itmisterAddressPicker
		},
		data() {
			return {
				InputList: [{
						title: '收货人',
						value: '',
						placeholder: '请输入收货人名字'
					},
					{
						title: '手机号码',
						value: '',
						placeholder: '请输入手机号码'
					},
					{
						title: '选择地区',
						value: '',
						placeholder: '请输入银行卡开户密码'
					},
					{
						title: '详细地址',
						value: '',
						placeholder: '小区楼栋/乡村名称'
					},
				],
				token: '',
				address: '',
				is_default:0,
				address_id:0
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			console.log(options)
			this.token = uni.getStorageSync('token')
			this.getAddress(options.address_id)
			this.address_id = options.address_id
		},
		onShow() {},

		onPullDownRefresh() {
			uni.stopPullDownRefresh();
		},
		created() {

		},
		methods: {
			//点击添加
			isValue(){
				if(this.InputList[0].value == '' || this.InputList[0].value == null){
						app.showToast('请输入收货人名字');
				}else if(this.InputList[1].value == '' || this.InputList[1].value == null){
					app.showToast('请输入手机号码');
				}else if(this.address == '' || this.address == null){
					app.showToast('请选择地区');
				}else if(this.InputList[3].value == '' || this.InputList[3].value == null){
					app.showToast('请填写详细地址');
				}else {
					this.Submit()
				}
			},
			//添加
			Submit() {
				let _this = this
				app._post_form('JadeAddress/edit', {
					name: _this.InputList[0].value,
					phone: _this.InputList[1].value,
					detail: _this.InputList[3].value,
					region: _this.address,
					is_default:_this.is_default,
					address_id:_this.address_id
				}, function(result) {
					if (1 == result.code) {
						app.showToast('修改成功');
						setTimeout(() => {
							uni.redirectTo({
								url: `./index`
							});
						}, 1500)

					}
				}, null, function() {
					// 解除按钮禁用
					app.showError(result.msg);
				});
			},
			getAddress(e){
				let _this = this
				app._post_form('JadeAddress/detail', {
					address_id:e
				}, function(result) {
					if (1 == result.code) {
						_this.is_default = result.data.detail.is_default
						_this.InputList[0].value = result.data.detail.receiver
						_this.InputList[1].value = result.data.detail.receiver_phone
						_this.InputList[3].value = result.data.detail.detail
						_this.address = result.data.detail.region.province + ',' + result.data.detail.region.city + "," + result.data.detail.region.region 
					}
				}, null, function() {
					// 解除按钮禁用
					app.showError(result.msg);
				});
			},
			//开关
			isSwitch(e){
				console.log(e.detail.value)
				if(e.detail.value){
					this.is_default = 1
				}else{
					this.is_default = 0
				}
				
			},
			// 打开窗口
			selectAddress() {
				this.$refs.addressEl.show();
			},
			// 确认选中
			confirmChange(address) {
				this.address = address.province + ',' + address.city + ',' + address.area;
			},
		}
	}
</script>

<style lang="scss">
	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.container {
		height: 100vh;
	}

	.Bottom_boder {
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}

	.Top_tilte {
		margin-top: 40rpx;
		width: 100%;
		height: 80rpx;
		background-color: #FFFFFF;
		text-align: center;
		color: rgba(0, 0, 0, 0.9);
		font-size: 30rpx;
		font-family: 'dy-iconfont';
		font-weight: bold;
		line-height: 80rpx;
	}

	.List_entrance {
		margin: 0 30rpx;
		margin-top: 50rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 4rpx 6rpx 1rpx rgba(0, 0, 0, 0.02);
		padding: 0 30rpx;

		.List_item {
			height: 100rpx;
			background-color: #FFF;
			display: flex;
			align-items: center;
			// justify-content: space-between;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.9);

			input {
				font-size: 28rpx;
			}

			.input {
				input {
					width: 400rpx;

				}
			}

			.inputYzm {
				height: 48rpx;
				display: flex;
				align-items: center;

				input {
					width: 224rpx;
				}

				.yzm {
					font-size: 24rpx
				}
			}
		}
	}

	.Submit {
		width: 92%;
		margin: 0 30rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #3A81F6;
		position: fixed;
		bottom: 114rpx;
		border-radius: 10rpx;
		color: #fff;
	}
</style>
